<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" right-icon="plus" title="管理收款账户" @clickLeft="leftBack" @clickRight="addBank" background-color="#318cff" color="#fff"></uni-nav-bar>
		<block v-for="(item,index) in list">
			<view class="dfj-flex-ai-c dfj-flex dfj-bg-white dfj-pd-30">
				<view><image style="width: 100rpx;height: 100rpx;" src="/static/img/my/bank.png"></image></view>
				<view class="dfj-flex-1 dfj-pd-lr-20">
					<view class="dfj-f-30 dfj-t-333">{{ item.bankName }}</view>
					<view class="dfj-t-999 dfj-mg-t-20">尾号{{ item.bankNo.substr(-4) }}</view>
				</view>
				<view>
					<text class="dfj-pd-tb-20 dfj-pd-lr-30 dfj-bd-base dfj-t-base" @click="unbound(item)">解除绑定</text>
				</view>
			</view>
		</block>
		
		<uni-popup ref="popup" type="bottom">
			<view class="dfj-bg-white" v-if="item">
				<view class="dfj-pd-30 dfj-t-c">
					<view class="dfj-t-666 dfj-f-28">请输入交易密码</view>
					<view class="dfj-pd-tb-30 dfj-f-35 dfj-t-999">
						解除{{ item.bankName }}后四位为：{{ item.bankNo.substr(-4) }}绑定
					</view>
					<view class="code-box">
						<block v-for="(item, index) in 6" :key="index">
							<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
						</block>
					</view>
				</view>
				<view class="keyboard">
					<block v-for="(item, index) in 9" :key="index">
						<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
					</block>
					<view class="keyboard-item hide"></view>
					<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
					<view class="keyboard-item delte" @tap="del()"><image style="width: 60rpx;height: auto;" mode="widthFix" src="/static/img/home/del.png" :lazy-load="true"></image></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				password: '',
				item: ''
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			unbound(item) {
				this.item = item
				this.$refs.popup.open()
			},
			getList() {
				this.$http({
					url: '/userOpt/getUserBankList'
				}).then(res=> {
					this.list = res.data
				})
			},
			addBank() {
				uni.navigateTo({
					url: "/pages/my/set-bank-add"
				})
			},
			key(key) {
				if (this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						
						this.$http({
							url: '/userOpt/unbindBank',
							data: {
								userBankId: this.item.id,
								payPwd: this.password
							}
						}).then(res=> {
							if(res.flag){
								uni.showToast({	title: '操作成功' });
								uni.navigateBack()
							}else{
								this.password = ''
							}
						})
					}
				}
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.keyboard{
		background: #EBEBEB;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition:all 0.2s ease-in 0.2s;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #EBEBEB;
		border-top:none;
		border-left:none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.code-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 1px solid #d0d0d0;
	}
	.code-box-item {
		width: 86rpx;
		height: 86rpx;
		background: #fff;
		font-size: 40rpx;
		line-height: 86rpx;
		text-align: center;
		flex: 1;
		border: 1rpx solid #e5e5e5;
	}
</style>
